<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 商家列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="addUserName">新增</el-button>
        <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select class="mr10" v-model="query.sut" placeholder="请选择状态">
          <el-option label="全部状态" value=""></el-option>
          <el-option label="启用" value=""></el-option>
          <el-option label="停用" value=""></el-option>
        </el-select>
        <el-input placeholder="请输入产品名称查询" class="handle-input mr10" v-model="query.souVal"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getlist">搜索</el-button>
      </div>
      <el-table v-loading="tableLoad" :data="tableList" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column label="头像" width="100">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 80px" :src="scope.row.headPortraits" fit="fill" :preview-src-list="touImageArr"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="user.name" label="姓名"></el-table-column>
        <el-table-column prop="user.phone" label="电话"></el-table-column>
        <el-table-column prop="jobNumber" label="工号"></el-table-column>
        <el-table-column prop="goodBusinessType" label="擅长业务类型"></el-table-column>
        <el-table-column prop="divideEqually" label="评分">
          <template slot-scope="scope">
            <i class="el-icon-star-on" :style="{'color':'rgb(247, 186, 42)'}"></i> {{scope.row.divideEqually}}分
          </template>
        </el-table-column>
        <el-table-column prop="divideEqually" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="1" active-color="#13ce66" inactive-value="0" inactive-color="#ff4949"
                       @change="statusChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="text" @click="editUserName(scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" type="text" @click="delClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="page.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>

    <!-- 添加人员 -->
    <el-dialog title="添加人员" :visible.sync="addUserForm.addUserFlg" width="30%">
      <el-form ref="addUserForm" :model="addUserForm" label-width="80px" :key="editId">
        <el-form-item label="客户经理">
          <el-select v-model="addUserForm.nameid" filterable placeholder="请选择" style="width:100%;">
            <el-option v-for="item in addUserForm.nameArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="addUserForm.gonghao"></el-input>
        </el-form-item>
        <el-form-item label="上传头像">
          <el-upload class="upload-demo" ref="upload" action="http://www.dazhimu.cc/fileUpload/file2Base64" :headers="uploadHeader" :limit="1"
                     accept=".png,.jpg" :on-success="fileChange" :on-progress="fileloadChange" :show-file-list="false"
                     style="float: left; margin-right: 10px">
            <el-button size="small" type="primary" :loading="excelLoad">上传头像</el-button>
          </el-upload>
          <el-link type="primary" :href="addUserForm.updateImg" target="_blank" :underline="false">查看照片</el-link>
        </el-form-item>
        <el-form-item label="擅长业务类型">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" v-model="addUserForm.shanchang"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserForm.addUserFlg = false">取 消</el-button>
        <el-button type="primary" @click="addSub" :loading="addUserForm.load">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图片裁剪 -->
    <el-dialog title="图片裁剪" :visible.sync="cropper.cropperFlg" width="30%">
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper ref="cropper" :img="cropper.option.img" :outputSize="cropper.option.size" :outputType="cropper.option.outputType" :info="true"
                      :full="cropper.option.full" :canMove="cropper.option.canMove" :canMoveBox="cropper.option.canMoveBox"
                      :original="cropper.option.original" :autoCrop="cropper.option.autoCrop" :fixed="cropper.option.fixed"
                      :fixedNumber="cropper.option.fixedNumber" :centerBox="cropper.option.centerBox" :infoTrue="cropper.option.infoTrue"
                      :fixedBox="cropper.option.fixedBox"></vueCropper>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cropper.cropperFlg = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="addUserForm.updateImgLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Storage from '../../../utils/localStorage';
import { VueCropper } from 'vue-cropper';
import { businessListGetTable, businessListGetJL, businessListAddSub, businessListAddBase64, businessListEditSub, businessListDel, businessListStatus } from '../../../api/index';

export default {
  data() {
    return {
      tableLoad: false,
      tableList: [],
      query: {
        page: 1,
        limit: 10,
        souVal: '',
      },
      page: {
        totalCount: 100
      },
      touImageArr: [],

      editId: '',
      addUserForm: {
        load: false,
        addUserFlg: false,
        nameid: '',
        nameArr: [],
        gonghao: '',
        updateImg: '',
        updateImgLoad: false,
        shanchang: '',
      },

      cropper: {
        cropperFlg: false,
        option: {
          img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3875709917,887364088&fm=26&gp=0.jpg', // 裁剪图片的地址
          info: false, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: 300, // 默认生成截图框宽度
          // autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [5, 5], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: false, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        }
      },

      excelLoad: false,
      uploadHeader: { Authorization: Storage.getItem('token') ? Storage.getItem('token') : '1' },
    };
  },
  components: {
    VueCropper
  },
  created() {
    this.getlist();
    this.getCustomerManager();
  },
  methods: {
    //获取列表
    getlist() {
      this.tableLoad = true;
      let query = {
        kw: this.query.souVal,
        limit: this.query.limit,
        page: this.query.page
      }
      businessListGetTable(query).then((res) => {
        this.tableLoad = false;
        if (res.code == 0) {
          this.tableList = res.recordList;
          this.page.totalCount = res.totalCount;
          this.touImageArr = [];
          res.recordList.forEach((item, i) => {
            this.touImageArr.push(item.headPortraits);
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //获取已有客户经理
    getCustomerManager() {
      this.addUserForm.nameArr = [];
      businessListGetJL().then((res) => {
        if (res.code == 0) {
          res.userList.forEach((item, i) => {
            this.addUserForm.nameArr.push({
              label: item.name + "/" + item.phone + "/" + item.departments.join(),
              value: item.id
            })
          })
        } else {
          this.$message(res.msg);
        }
      })
    },

    //选中
    SelectionChange(val) { },
    //新增
    addUserName() {
      this.editId = "";
      this.addUserForm.addUserFlg = true;
      this.addUserForm.nameid = '';
      this.addUserForm.gonghao = '';
      this.addUserForm.updateImg = '';
      this.addUserForm.shanchang = '';
    },
    //编辑
    editUserName(item) {
      this.editId = item.id;
      this.addUserForm.addUserFlg = true;
      this.addUserForm.nameid = item.userId;
      this.addUserForm.gonghao = item.jobNumber;
      this.addUserForm.updateImg = item.headPortraits;
      this.addUserForm.shanchang = item.goodBusinessType;
    },
    //删除
    delClick(id) {
      this.tableLoad = true;
      businessListDel({ managerId: id }).then((res) => {
        this.tableLoad = false;
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getlist();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //提交
    addSub() {
      this.addUserForm.load = true;
      let data = {
        id: this.editId,
        userId: this.addUserForm.nameid,
        jobNumber: this.addUserForm.gonghao,
        headPortraits: this.addUserForm.updateImg,
        goodBusinessType: this.addUserForm.shanchang,
      };
      if (this.editId) {
        businessListEditSub(data).then((res) => {
          this.addUserForm.load = false;
          if (res.code == 0) {
            this.$message.success("编辑成功");
            this.addUserForm.addUserFlg = false;
            this.getlist();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        businessListAddSub(data).then((res) => {
          this.addUserForm.load = false;
          if (res.code == 0) {
            this.$message.success("新增成功");
            this.addUserForm.addUserFlg = false;
            this.getlist();
          } else {
            this.$message(res.msg);
          }
        })
      }
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getlist();
    },
    //上传中
    fileloadChange(event, file, fileList) {
      this.excelLoad = true;
    },
    //上传成功
    fileChange(response, file, fileList) {
      this.excelLoad = false;
      this.$refs.upload.clearFiles();
      if (response.code === 0) {
        this.cropper.option.img = response.base64EncoderImg;
        this.cropper.cropperFlg = true;
      } else {
        this.$message('上传失败');
      }
    },
    //裁剪
    finish() {
      this.addUserForm.updateImgLoad = true;
      this.$refs.cropper.getCropData((data) => {
        businessListAddBase64({ base64: data }).then((res) => {
          this.addUserForm.updateImgLoad = false;
          if (res.code == 0) {
            this.$message.success('上传成功');
            this.addUserForm.updateImg = res.path;
            this.cropper.cropperFlg = false;
          } else {
            this.$message(res.msg);
          }
        })
      });
    },
    //启用停用
    statusChange(item) {
      businessListStatus({
        id: item.id,
        status: item.status
      }).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.getlist();
        } else {
          this.$message(res.msg);
        }
      })
    },

    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
  },
  mounted() {

  }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.box-card {
    margin-bottom: 15px;
}
.el-tou {
    width: 80px;
    height: 80px;
    float: left;
}
.el-touright {
    float: left;
    padding-left: 20px;
}
.el-touright-div {
    line-height: 28px;
}
.list-tel {
    font-size: 14px;
    color: #666;
    margin-left: 20px;
}
.list-bei {
    color: #666;
    font-size: 14px;
}
.list-btn {
    float: right;
    width: 240px;
    text-align: center;
    line-height: 80px;
    height: 80px;
    border-left: 1px solid #eee;
}

/* 截图 */
.cropper-content .cropper {
    width: auto;
    height: 300px;
}
.refund-list {
    margin-bottom: 10px;
}
</style>
